<template>
  <div class="blog-page bg-bg-primary">
    <!-- 博客页面头部 -->
    <section class="blog-header py-12 md:py-16">
      <div class="layout-container">
        <div class="max-w-3xl mx-auto text-center">
          <h1
            class="text-4xl md:text-5xl font-bold mb-4 text-text-primary blog-title"
          >
            <span class="text-primary">技术博客</span>
          </h1>
          <p class="text-lg text-text-secondary mb-8 blog-description">
            分享前端开发、UI设计和全栈技术的心得体会，记录学习过程中的经验与收获。
          </p>
          <div class="search-container mx-auto max-w-xl mb-4">
            <n-input-group>
              <n-input placeholder="搜索文章..." clearable>
                <template #prefix>
                  <n-icon>
                    <SearchOutline />
                  </n-icon>
                </template>
              </n-input>
              <n-button type="primary">搜索</n-button>
            </n-input-group>
          </div>
        </div>
      </div>
    </section>

    <!-- 博客内容区域 -->
    <section class="blog-content bg-bg-primary py-12">
      <div class="layout-container">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
          <!-- 左侧边栏 -->
          <div class="lg:col-span-1">
            <div class="sidebar sticky top-24 space-y-8">
              <!-- 分类 -->
              <div
                class="categories-filter animate-item bg-bg-secondary p-6 rounded-lg shadow-sm"
              >
                <h3 class="text-xl font-bold mb-4 text-text-primary">分类</h3>
                <n-menu :options="categoryOptions" />
              </div>

              <!-- 标签云 -->
              <div
                class="tags-cloud animate-item bg-bg-secondary p-6 rounded-lg shadow-sm"
                style="animation-delay: 0.1s"
              >
                <h3 class="text-xl font-bold mb-4 text-text-primary">
                  热门标签
                </h3>
                <div class="flex flex-wrap gap-2">
                  <n-tag
                    v-for="(tag, index) in tags"
                    :key="index"
                    :type="index % 5 === 0 ? 'primary' : 'default'"
                    class="cursor-pointer tag-item"
                    round
                  >
                    {{ tag.name }} ({{ tag.count }})
                  </n-tag>
                </div>
              </div>

              <!-- 热门文章 -->
              <div
                class="popular-posts animate-item bg-bg-secondary p-6 rounded-lg shadow-sm"
                style="animation-delay: 0.2s"
              >
                <h3 class="text-xl font-bold mb-4 text-text-primary">
                  热门文章
                </h3>
                <div class="space-y-4">
                  <div
                    v-for="(post, index) in popularPosts"
                    :key="index"
                    class="flex gap-3"
                  >
                    <div class="flex-shrink-0 mt-1">
                      <div
                        class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold"
                      >
                        {{ index + 1 }}
                      </div>
                    </div>
                    <div>
                      <h4
                        class="font-medium text-text-primary hover:text-primary transition-colors cursor-pointer"
                      >
                        {{ post.title }}
                      </h4>
                      <p class="text-sm text-text-secondary">
                        {{ post.viewCount }} 阅读
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 文章列表 -->
          <div class="lg:col-span-3">
            <!-- 筛选选项 -->
            <div
              class="filter-bar flex justify-between items-center mb-8 animate-item"
            >
              <div class="flex items-center gap-2">
                <n-dropdown :options="sortOptions" @select="handleSortChange">
                  <n-button quaternary>
                    排序：{{ currentSort }}
                    <n-icon class="ml-1">
                      <ChevronDownOutline />
                    </n-icon>
                  </n-button>
                </n-dropdown>
              </div>
              <n-button-group>
                <n-button quaternary size="small" class="view-btn">
                  <n-icon>
                    <ListOutline />
                  </n-icon>
                </n-button>
                <n-button quaternary size="small" class="view-btn">
                  <n-icon>
                    <GridOutline />
                  </n-icon>
                </n-button>
              </n-button-group>
            </div>

            <!-- 文章列表 -->
            <div class="post-grid space-y-6">
              <div
                v-for="(post, index) in posts"
                :key="post.id"
                class="post-card animate-item"
                :style="{ animationDelay: `${0.1 + index * 0.1}s` }"
              >
                <div class="card flex flex-col md:flex-row gap-6">
                  <div class="post-image-container md:w-1/3">
                    <img
                      :src="post.coverImage"
                      :alt="post.title"
                      class="post-image w-full h-48 md:h-full object-cover rounded-lg"
                    />
                  </div>
                  <div class="post-content md:w-2/3 flex flex-col">
                    <div>
                      <div class="flex items-center gap-3 mb-2">
                        <n-tag size="small" type="primary" class="uppercase">{{
                          post.category
                        }}</n-tag>
                        <span class="text-text-secondary text-sm">{{
                          post.publishDate
                        }}</span>
                      </div>
                      <h2
                        class="text-2xl font-bold mb-2 text-text-primary hover:text-primary transition-colors cursor-pointer"
                      >
                        {{ post.title }}
                      </h2>
                      <p class="text-text-secondary mb-4 line-clamp-2">
                        {{ post.excerpt }}
                      </p>
                    </div>
                    <div class="mt-auto">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-4">
                          <div
                            class="flex items-center gap-1 text-text-secondary"
                          >
                            <n-icon size="16">
                              <EyeOutline />
                            </n-icon>
                            <span>{{ post.viewCount }}</span>
                          </div>
                          <div
                            class="flex items-center gap-1 text-text-secondary"
                          >
                            <n-icon size="16">
                              <ChatbubbleOutline />
                            </n-icon>
                            <span>{{ post.commentCount }}</span>
                          </div>
                          <div
                            class="flex items-center gap-1 text-text-secondary"
                          >
                            <n-icon size="16">
                              <HeartOutline />
                            </n-icon>
                            <span>{{ post.likeCount }}</span>
                          </div>
                        </div>
                        <n-button size="small" class="read-more">
                          阅读全文
                          <n-icon class="ml-1">
                            <ArrowForwardOutline />
                          </n-icon>
                        </n-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div
              class="pagination flex justify-center mt-12 animate-item"
              style="animation-delay: 0.4s"
            >
              <n-pagination
                v-model:page="page"
                :page-count="totalPages"
                :page-size="pageSize"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 博客订阅区域 -->
    <section class="subscribe-section py-16 bg-bg-primary">
      <div class="layout-container">
        <div class="max-w-3xl mx-auto text-center animate-item">
          <h2 class="text-3xl font-bold mb-4 text-text-primary">
            订阅博客更新
          </h2>
          <p class="text-lg text-text-secondary mb-6">
            订阅我的博客，获取最新的技术文章和教程通知。
          </p>
          <div class="flex max-w-md mx-auto">
            <n-input-group>
              <n-input placeholder="您的邮箱地址" />
              <n-button type="primary">
                订阅
                <n-icon class="ml-1">
                  <SendOutline />
                </n-icon>
              </n-button>
            </n-input-group>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  SearchOutline,
  ChevronDownOutline,
  ListOutline,
  GridOutline,
  EyeOutline,
  ChatbubbleOutline,
  HeartOutline,
  ArrowForwardOutline,
  SendOutline,
} from "@vicons/ionicons5";
import { h, ref } from "vue";
import { NIcon } from "naive-ui";

// 当前页数
const page = ref(1);
const pageSize = ref(5);
const totalPages = ref(10);

// 当前排序方式
const currentSort = ref("最新发布");
const sortOptions = [
  {
    label: "最新发布",
    key: "latest",
  },
  {
    label: "最多阅读",
    key: "most-viewed",
  },
  {
    label: "最多评论",
    key: "most-commented",
  },
];

// 分类菜单
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const categoryOptions = [
  {
    label: "全部文章",
    key: "all",
  },
  {
    label: "前端开发",
    key: "frontend",
    children: [
      {
        label: "Vue.js",
        key: "vue",
      },
      {
        label: "React",
        key: "react",
      },
      {
        label: "JavaScript",
        key: "javascript",
      },
    ],
  },
  {
    label: "后端开发",
    key: "backend",
    children: [
      {
        label: "Node.js",
        key: "nodejs",
      },
      {
        label: "Python",
        key: "python",
      },
    ],
  },
  {
    label: "UI/UX设计",
    key: "design",
  },
  {
    label: "开发工具",
    key: "tools",
  },
  {
    label: "职业发展",
    key: "career",
  },
];

// 标签
const tags = [
  { name: "JavaScript", count: 15 },
  { name: "CSS", count: 12 },
  { name: "Vue", count: 10 },
  { name: "React", count: 8 },
  { name: "TypeScript", count: 7 },
  { name: "Node.js", count: 6 },
  { name: "HTML5", count: 5 },
  { name: "Webpack", count: 4 },
  { name: "Git", count: 4 },
  { name: "UI设计", count: 3 },
  { name: "性能优化", count: 3 },
  { name: "面试", count: 2 },
];

// 热门文章
const popularPosts = [
  { title: "Vue 3 组合式API完全指南", viewCount: 5280 },
  { title: "从零开始学习TypeScript", viewCount: 4356 },
  { title: "2023年前端开发者必备技能", viewCount: 3892 },
  { title: "如何优化React应用性能", viewCount: 3547 },
  { title: "CSS Grid布局详解", viewCount: 3102 },
];

// 博客文章
const posts = [
  {
    id: 1,
    title: "Vue 3 组合式API完全指南：从入门到精通",
    excerpt:
      "本文详细介绍了Vue 3的组合式API，包括setup函数、响应式API、生命周期钩子等内容，帮助你全面掌握Vue 3的新特性。",
    coverImage: "/images/blog/vue3.jpg",
    category: "Vue.js",
    publishDate: "2023-10-15",
    viewCount: 5280,
    commentCount: 32,
    likeCount: 128,
  },
  {
    id: 2,
    title: "从零开始学习TypeScript：类型系统详解",
    excerpt:
      "TypeScript作为JavaScript的超集，提供了静态类型检查和更多的面向对象特性。本文将带你从基础开始，深入理解TypeScript的类型系统。",
    coverImage: "/images/blog/typescript.jpg",
    category: "TypeScript",
    publishDate: "2023-09-28",
    viewCount: 4356,
    commentCount: 27,
    likeCount: 113,
  },
  {
    id: 3,
    title: "2023年前端开发者必备技能和工具",
    excerpt:
      "随着前端技术的快速发展，作为开发者需要不断学习新技能。本文总结了2023年前端开发者应该掌握的关键技能和常用工具。",
    coverImage: "/images/blog/frontend-skills.jpg",
    category: "职业发展",
    publishDate: "2023-09-12",
    viewCount: 3892,
    commentCount: 24,
    likeCount: 97,
  },
  {
    id: 4,
    title: "如何优化React应用性能：实用技巧与最佳实践",
    excerpt:
      "React应用在大规模数据和复杂交互下可能会遇到性能问题。本文分享了一系列优化React应用性能的实用技巧和最佳实践。",
    coverImage: "/images/blog/react-performance.jpg",
    category: "React",
    publishDate: "2023-08-30",
    viewCount: 3547,
    commentCount: 22,
    likeCount: 89,
  },
  {
    id: 5,
    title: "CSS Grid布局详解：构建复杂网格系统",
    excerpt:
      "CSS Grid是一种强大的二维布局系统，本文详细讲解了CSS Grid的核心概念和用法，帮助你轻松构建复杂的网格布局。",
    coverImage: "/images/blog/css-grid.jpg",
    category: "CSS",
    publishDate: "2023-08-15",
    viewCount: 3102,
    commentCount: 19,
    likeCount: 76,
  },
];

// 处理排序变化
function handleSortChange(key: string) {
  switch (key) {
    case "latest":
      currentSort.value = "最新发布";
      break;
    case "most-viewed":
      currentSort.value = "最多阅读";
      break;
    case "most-commented":
      currentSort.value = "最多评论";
      break;
  }
  // 此处可添加实际排序逻辑
}

// 使用 Intersection Observer 监测元素是否进入视口
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("animate-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.1 }
  );

  // 观察所有需要动画的元素
  document.querySelectorAll(".animate-item").forEach((item) => {
    observer.observe(item);
  });
});
</script>

<style scoped>
.blog-page {
  color: var(--text-primary);
}

/* 标题样式 */
.blog-title {
  animation: fadeInUp 0.8s ease-out;
}

.blog-description {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.search-container {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* 博客头部样式 */
.blog-header {
  position: relative;
  background-color: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.blog-header::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background-color: var(--primary-color);
  opacity: 0.05;
  border-radius: 50%;
  z-index: 0;
}

.blog-header::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background-color: var(--primary-color);
  opacity: 0.05;
  border-radius: 50%;
  z-index: 0;
}

/* 卡片样式 */
.card {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 图片容器 */
.post-image-container {
  overflow: hidden;
  border-radius: 8px;
}

.post-image {
  transition: transform 0.5s ease;
}

.post-card:hover .post-image {
  transform: scale(1.05);
}

/* 侧边栏 */
.sidebar {
  height: fit-content;
}

/* 标签云 */
.tag-item {
  transition: transform 0.3s ease;
}

.tag-item:hover {
  transform: scale(1.05);
}

/* 滚动触发动画 */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 按钮样式 */
.view-btn {
  transition: background-color 0.3s ease;
}

.view-btn:hover {
  color: var(--primary-color);
}

/* 文章内容截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .post-content {
    padding: 0;
  }

  .card {
    padding: 1rem;
  }
}

/* 调整侧边栏在移动视图中的显示 */
@media (max-width: 1024px) {
  .sidebar {
    position: static;
    margin-bottom: 2rem;
  }

  /* 在移动端采用水平滚动的标签列表 */
  .tags-cloud .flex {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tags-cloud .flex::-webkit-scrollbar {
    height: 4px;
  }

  .tags-cloud .flex::-webkit-scrollbar-thumb {
    background-color: rgba(var(--primary-color-rgb), 0.4);
    border-radius: 2px;
  }

  /* 调整分类菜单样式 */
  .categories-filter {
    margin-bottom: 1rem;
  }
}

/* 确保博客卡片在各种屏幕尺寸上正确显示 */
@media (max-width: 768px) {
  .blog-posts .grid {
    gap: 1rem;
  }
}
</style>
